<template>
  <div>
    <el-divider content-position="left">
      <span style="color: #f56c6c; font-weight: bold;">⚠️ 风险管理配置</span>
    </el-divider>
    
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item>
          <template #label>
            <div style="display: flex; align-items: center; gap: 4px;">
              <span>止损比例</span>
              <el-tooltip
                content="当交易亏损达到此百分比时自动平仓止损。例如设置5%，买入价100的资产跌到95时触发止损。设置0表示不使用止损。推荐3-8%。"
                placement="top"
                effect="dark"
              >
                <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <el-input-number v-model="backtestSettings.stopLoss" :min="0" :step="0.1" :max="20" style="width: 100%;"></el-input-number>
          <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐5%，0表示不启用止损</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <template #label>
            <div style="display: flex; align-items: center; gap: 4px;">
              <span>止盈比例</span>
              <el-tooltip
                content="当交易盈利达到此百分比时自动平仓止盈。例如设置10%，买入价100的资产涨到110时触发止盈。设置0表示不使用止盈。推荐8-20%。"
                placement="top"
                effect="dark"
              >
                <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <el-input-number v-model="backtestSettings.takeProfit" :min="0" :step="0.1" :max="50" style="width: 100%;"></el-input-number>
          <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐10%，0表示不启用止盈</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <template #label>
            <div style="display: flex; align-items: center; gap: 4px;">
              <span>最大仓位</span>
              <el-tooltip
                content="单次交易允许的最大资金占用比例。例如设置50%，表示单笔交易最多使用50%的可用资金。较低的仓位更安全，较高的仓位收益潜力更大。"
                placement="top"
                effect="dark"
              >
                <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <el-input-number v-model="backtestSettings.maxPosition" :min="10" :step="5" :max="100" style="width: 100%;"></el-input-number>
          <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐50-100%，根据风险偏好调整</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <template #label>
            <div style="display: flex; align-items: center; gap: 4px;">
              <span>风险控制</span>
              <el-tooltip
                content="开启后将启用智能风险控制机制，包括最大回撤限制、连续亏损保护等。建议始终开启以保护资金安全。"
                placement="top"
                effect="dark"
              >
                <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <el-switch
            v-model="backtestSettings.riskControl"
            active-text="开启"
            inactive-text="关闭"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
          <div style="font-size: 12px; color: #909399; margin-top: 2px;">强烈建议开启风险控制</div>
        </el-form-item>
      </el-col>
    </el-row>
    
    <!-- 数据源说明卡片 -->
    <el-card v-if="backtestSettings.dataSource === 'real'" shadow="hover" style="margin-top: 20px; background: #f0f9ff; border: 1px solid #7dd3fc;">
      <template #header>
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon color="#0284c7"><Connection /></el-icon>
          <span style="color: #0284c7; font-weight: bold;">真实数据源说明</span>
        </div>
      </template>
      <div style="color: #0c4a6e; line-height: 1.6;">
        <p style="margin: 0 0 10px 0;"><strong>数据获取顺序：</strong></p>
        <ol style="margin: 0; padding-left: 20px;">
          <li><strong>Binance API</strong> - 优先使用，数据质量最高，实时更新</li>
          <li><strong>CryptoCompare API</strong> - 备用数据源，提供丰富的历史数据</li>
          <li><strong>CoinGecko API</strong> - 第三备用数据源，免费使用</li>
        </ol>
        <p style="margin: 10px 0 0 0; font-size: 14px; color: #64748b;">
          ℹ️ 系统将自动尝试多个数据源，确保获取最优质的历史数据进行回测。
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { QuestionFilled, Connection } from '@element-plus/icons-vue'

export default {
  name: 'RiskManagement',
  components: {
    QuestionFilled,
    Connection
  },
  props: {
    backtestSettings: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
/* 样式已在主组件中定义 */
</style>